<template>
  <div class="box">
    <div class="card">
      <div class="form-item">
        <label class="label">风险偏好</label>
        <el-radio
          v-for="tag in riskAppetite"
          :label="tag.name"
          v-model="params.preference"
          border
          size="small"
        >
          {{ tag.name }}
        </el-radio>
      </div>
      <div class="form-item">
        <label class="label">所属地区</label>
        <el-radio
          v-for="tag in location"
          :label="tag.name"
          v-model="params.cusBlocks"
          border
          size="small"
        >
          {{ tag.name }}
        </el-radio>
      </div>
      <div class="form-item">
        <label class="label">所属行业</label>
        <el-radio
          v-for="tag in industry"
          :label="tag.name"
          v-model="params.ibankPropNm"
          border
          size="small"
        >
          {{ tag.name }}
        </el-radio>
      </div>
      <div class="form-item">
        <label class="label">风险评级</label>
        <el-radio
          v-for="tag in rate"
          :label="tag.name"
          v-model="params.custRating"
          border
          size="small"
        >
          {{ tag.name }}
        </el-radio>
      </div>
      <div class="form-item">
        <div style="margin-left: 80%">
          <el-button
            class="btn"
            size="small"
            type="primary"
            @click="searchCustomer"
            >查询</el-button
          >
          <el-button class="btn" size="small" @click="reset">重置</el-button>
        </div>
      </div>
    </div>
    <div class="card group-detail">
      <!-- 明细 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="序号" type="index" width="55">
        </el-table-column>
        <el-table-column
          prop="customerID"
          label="客户编号"
          min-width="140"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="customerNM"
          label="客户名称"
          min-width="140"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="cusBlocks"
          label="所属地区"
          min-width="90"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="ibankPropNm"
          label="所属行业"
          min-width="90"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="riskAttitudeNM"
          label="风险偏好"
          min-width="90"
          align="center"
        >
        </el-table-column>
        <!--<el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">操作</el-button>
            </template>
          </el-table-column>-->
      </el-table>
      <el-pagination
        small
        background
        layout="prev, pager, next"
        :page-size="pageInfo.pageSize"
        :current-page="pageInfo.pageNum"
        :total="pageInfo.total"
        @current-change="customerChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { queryCustomer, queryCusBlock } from "@/api/eigen/label.js";
export default {
  data() {
    return {
      tabIndex: 0,
      riskAppetite: [
        { name: "极端保守" },
        { name: "保守" },
        { name: "稳健" },
        { name: "平衡中立" },
        { name: "积极" },
        { name: "激进" },
        { name: "极端激进" },
      ],
      location: [
        { name: "上海" },
        { name: "北京" },
        { name: "香港" },
        { name: "华东" },
        { name: "西南" },
        { name: "华北" },
        { name: "华中" },
        { name: "境外" },
      ],
      industry: [
        { name: "证券" },
        { name: "银行" },
        { name: "保险" },
        { name: "信托" },
        { name: "财务" },
        { name: "期货" },
        { name: "基金" },
        { name: "贷款" },
      ],
      rate: [
        { name: "AAA" },
        { name: "AA+" },
        { name: "AA" },
        { name: "A" },
        { name: "B" },
        { name: "C" },
      ],
      any: [{ name: "" }, { name: "" }],
      tableData: [],
      searchInput: "",
      selectValue: "",
      searchList: [],
      params: {
        preference: "",
        cusBlocks: "",
        ibankPropNm: "",
        custRating: "",
      },
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  mounted() {
    let _this = this;
    // this.searchCustomer();
    this.$nextTick(() => {
      queryCusBlock({}).then((res) => {
        console.log("res", res);
        if (res && res.data) {
          _this.location = [];
          res.data.forEach((item) => {
            if (item) {
              _this.location.push({
                name: item,
              });
            }
          });
        }
      });
    });
  },
  methods: {
    tabFn(i) {
      this.tabIndex = i;
    },
    reset() {
      this.params = {
        preference: "",
        cusBlocks: "",
        ibankPropNm: "",
        custRating: "",
      };
    },
    customerChange(currentPage) {
      this.pageInfo.pageNum = currentPage;
      this.searchCustomer();
    },
    searchCustomer() {
      let _this = this;
      queryCustomer({
        ..._this.params,
        pn: _this.pageInfo.pageSize,
        page: _this.pageInfo.pageNum,
      }).then((res) => {
        _this.tableData = [];
        _this.tableData = res.data.result;
        _this.pageInfo.total = parseInt(res.data.totalResults);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-pagination {
  margin-top: 10px;
  text-align: right;
}

::v-deep .el-radio__input {
  display: none;
}

::v-deep .el-radio {
  width: 85px;
  margin-right: 10px;
  text-align: center;
  color: #ffffff;
  border: 0px;
  background-color: #354060;
}

::v-deep .el-radio.is-bordered.is-checked {
  background-color: #1f9bfd;
  border: 0px;
}

::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #ffffff;
}

::v-deep .el-radio.is-bordered + .el-radio.is-bordered {
  margin-top: 10px;
  margin-left: 0;
}

.box {
  .el-select-dropdown {
    padding: 10px 0px !important;
  }

  .card {
    padding: 10px 10px;
    background-color: #262d47;
    color: #959fc5;

    .title {
      font-size: 16px;
    }

    .info {
      display: flex;
      padding: 10px 10px;

      .infoItem {
        flex: 1;

        div:not(:last-child) {
          margin-bottom: 10px;
        }
      }
    }
  }

  .form-item {
    padding: 5px 10px;

    .label {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin-right: 20px;
    }
  }

  .group-detail {
    height: 100%;
    margin-top: 10px;
  }

  .btn-group {
    padding: 10px 5px;
  }

  .infoItemLabel {
    margin-right: 10px;
  }

  .el-table ::v-deep th.el-table__cell {
    background-color: #1c2238 !important;
    color: #fff;
  }
}
</style>
